<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('基础示例')}`">{{ $t('基础示例') }}</t>
            <li>
                <span class="s-code">v-model</span>所绑定的值是个数组，初始值支持传入由节点的
                <span class="s-code">nodeKey</span>组成的数组，也支持传入由<span style="color:#000;font-weight: 600;">节点数据</span>组成的数组
            </li>
            <li>
                <span class="s-code">nodeKey</span>用于指定树节点的唯一键，组件内部默认取节点的<span class="s-code">"id"</span>，如果节点数据内不存在
                <span class="s-code">"id"</span>，那么你必须配置<span class="s-code">nodeKey</span>
            </li>
            <li>
                当选择节点后，<span class="s-code">v-model</span>的值将会变成由<span style="color:#000;font-weight: 600;">节点数据</span>组成的数组
            </li>
        </template>
        <div style="width: 300px;">
            <sib-item v-model="value" :props="props" @change="change"></sib-item>
        </div>
        <p style="color: #666;">当前选择的是：{{ value && value.length ? value : '--' }}</p>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const treeData = [
            {
                nodeId: 1,
                name: '一级 1',
                children: [
                    {
                        nodeId: 4,
                        name: '二级 1-1',
                        children: [
                            {
                                nodeId: 9,
                                name: '三级 1-1-1',
                            },
                            {
                                nodeId: 10,
                                name: '三级 1-1-2',
                            },
                        ],
                    },
                ],
            },
            {
                nodeId: 2,
                name: '一级 2',
                children: [
                    {
                        nodeId: 5,
                        name: '二级 2-1',
                    },
                    {
                        nodeId: 6,
                        name: '二级 2-2',
                    },
                ],
            },
        ];
        const value = ref([5]);
        const props = reactive({
            type: 'tree',
            nodeKey: 'nodeId',
            data: treeData,
        });
        const change = (data) => {
            console.log('data: ', data);
        };

        return {
            props,
            value,
            change,
            templateString: `<template>
    <sib-item v-model="value" :props="props" @change="change"></sib-item>
    <p>当前选择的是：{{ value && value.length ? value : '--' }}</p>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const treeData = [
            {
                nodeId: 1,
                name: '一级 1',
                children: [
                    {
                        nodeId: 4,
                        name: '二级 1-1',
                        children: [
                            {
                                nodeId: 9,
                                name: '三级 1-1-1',
                            },
                            {
                                nodeId: 10,
                                name: '三级 1-1-2',
                            },
                        ],
                    },
                ],
            },
            {
                nodeId: 2,
                name: '一级 2',
                children: [
                    {
                        nodeId: 5,
                        name: '二级 2-1',
                    },
                    {
                        nodeId: 6,
                        name: '二级 2-2',
                    },
                ],
            },
        ];
        const value = ref([5]);
        const props = reactive({
            type: 'tree',
            nodeKey: 'nodeId',
            data: treeData,
        });
        const change = (data) => {
            console.log('data: ', data);
        };

        return { props, value, change };
    },
};
<\/script>`,
        };
    },
};
</script>
